<template>
  <div>
    <GQuery @queryChange="setQuery" />
    <GQuery>
      <template #btn="{ query }">
        <el-button type="primary" @click="(e) => setQuery(query)"
          >搜索{{ query }}</el-button
        >
      </template>
    </GQuery>
    <!-- <GTable
      @handleSizeChange="doHandleSizeChange"
      @handleCurrentChange="doHandleCurrentChange"
      :tableData="data"
      :config="tableConfig"
      :columns="columns"
      :pager="configPager"
    > -->
    <GTable
      @handleSizeChange="doHandleSizeChange"
      @handleCurrentChange="doHandleCurrentChange"
      @selection-change="selectionChange"
      :tableData="tableData"
      :config="tableConfig"
      :columns="columns"
      :pager="configPager"
    >
      <!-- <template #address="row">
        <el-button size="mini">编辑{{ row.address }}</el-button>
      </template> -->
      <!-- <template #birthday="row">
        <span>{{ row.birthday | convertDate }}</span>
      </template>

      <template #sex="row">
        <span>{{ row.sex | common("sex") }}</span>
      </template>
      <template #education="row">
        <span>{{ row.education | common("education") }}</span>
      </template> -->

      <template #status="row">
        <el-tag :type="row.status | common('statusColor')">{{
          row.status | common("status")
        }}</el-tag>
      </template>

      <template #operation="row">
        <el-button type="primary" @click="editing(row)">编辑</el-button>
        <el-button type="danger" @click="deleteLoan(row.id, row.name)">删除</el-button>
        <GEbutton
          type="success"
          :confirm="`是否【${row.name}】确认提交审核?`"
          @submit="doSubmitData(row.id, $event)"
          >提交审核</GEbutton
        >
      </template>

      <template #append>
        <button>我是行尾</button>
      </template>
    </GTable>
    <!-- 底部弹窗 -->
    <el-dialog
      title="申请管理-编辑"
      :visible.sync="dialogVisible"
      @open="childExist = true"
      @closed="childExist = false"
      width="50%"
    >
      <GFormCreator ref="editForm" v-if="childExist" :config="editFormConfig">
        <div>
          <!-- <el-button type="primary" @click="updateForm">确定</el-button> -->
          <GEbutton confirm="是否确认保存" @submit="updateForm">保存</GEbutton>
          <el-button @click="cancelDialog">取消</el-button>
        </div>
      </GFormCreator>
    </el-dialog>
  </div>
</template>

<script>
// import { loanLost } from "@/api/loan";
import { columns } from "./pageConfig";
import pager from "@/mixins/pager";
// import request from "@/utils/request";
import crud from "@/mixins/crud";
import { sexOptions } from "@/conf/uiFields";
import { addDefaultValueByData } from "@/utils/form";
export default {
  mixins: [pager, crud],
  name: "InputManager",
  // async created() {
  // let pager = {
  //   pageNo: 1,
  //   pageSize: 10,
  //   name: "", // 模糊查询
  // };
  // this.isLoading = true;
  // // const res = await loanLost(pager);
  // const res = await loanLost(this.pager);
  // this.isLoading = false;
  // this.data = res?.data?.data?.data?.data;
  // },
  // created() {
  //   this.loadByPage();
  // },
  data() {
    return {
      configPager: {},
      // pager: {
      //   pageNo: 1,
      //   pageSize: 10,
      //   name: "", // 模糊查询
      // },
      // isLoading: false,
      editFormConfig: {
        fields: [
          [{ label: "姓名", value: "111", type: "text", key: "name" }],
          [
            {
              label: "性别",
              value: "man",
              type: "select",
              key: "sex",
              options: sexOptions,
            },
          ],
        ],
        rules: {
          name: [{ required: true, message: "请输入姓名", triggle: "blur" }],
          sex: [{ required: true, message: "请选择性别", triggle: "blur" }],
        },
      },
      childExist: false,
      dialogVisible: false,
      tableConfig: {
        usePager: true,
        multipleSelection: true,
        index: true,
      },
      // 分页
      // configPager: {
      //   currentPage: 1,
      //   pageSizes: [10, 20, 30, 40],
      //   pageSize: 100,
      //   layout: "total, sizes, prev, pager, next, jumper",
      //   total: 400,
      // },
      // data: [
      // {
      //   date: "2016-05-02",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1518 弄",
      // },
      // {
      //   date: "2016-05-04",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1517 弄",
      // },
      // {
      //   date: "2016-05-01",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1519 弄",
      // },
      // {
      //   date: "2016-05-03",
      //   name: "王小虎",
      //   address: "上海市普陀区金沙江路 1516 弄",
      // },
      // ],
      columns,
      // columns: [
      //   {
      //     prop: "date",
      //     label: "汇总",
      //     width: "180",
      //     children: [
      //       {
      //         prop: "name",
      //         label: "姓名",
      //         width: "180",
      //         formatter(row) {
      //           return `<div>
      //       <h2>${row.name}这是自定义html</h2>
      //       <button>按钮</button>
      //     </div>`;
      //         },
      //       },
      //       { prop: "address", label: "地址", width: "160" },
      //     ],
      //   },
      //   {
      //     prop: "name",
      //     label: "姓名",
      //     width: "180",
      //     formatter(row) {
      //       return `<div>
      //       <h2>${row.name}这是自定义html</h2>
      //       <button>按钮</button>
      //     </div>`;
      //     },
      //   },
      //   { prop: "address", label: "地址", width: "160" },
      // ],
    };
  },
  methods: {
    // 提交审核
    doSubmitData(id, e) {
      console.log("接收到id", id, e);
      this.doSubmit({ data: { id } });
    },
    updateForm() {
      // 获取表单数据
      const reqData = this.$refs.editForm.getData();
      this.doUpdate({
        data: {
          ...this.currentRow, // {  name:1,xx:2}
          ...reqData, // 覆盖更新内容  { name:'a' }
        },
      });
      this.cancelDialog();
    },
    cancelDialog() {
      this.dialogVisible = false;
    },
    editing(row) {
      this.dialogVisible = true;
      // 不需要响应式，更新的接口中提交要用
      this.currentRow = row;
      // 生成表单展示的内容，一般是发请求
      addDefaultValueByData(row, this.editFormConfig); // 给config加value
    },
    getRequestOption() {
      return {
        read: { url: "/loan/list", method: "get" },
        delete: {
          url: "/loan/delete/",
          method: "delete",
        },
        update: {
          url: "/loan/update",
          method: "put",
        },
        submit: {
          url: "/loan/submitToApprove",
          method: "post",
        },
      };
      // 覆盖混入中的方法
      // 允许异步获取 需要返回Promise
      // return new Promise((res) => {
      //   // 模拟异步获取请求参数
      //   setTimeout(() => {
      //     res({
      //       read: { url: "/loan/list", method: "get" },
      //       delete: {
      //         url: "/loan/delete/",
      //         method: "delete",
      //       },
      //     });
      //   }, 1000);
      // });
    },
    // async doDelete(id) {
    //   const res = await request({
    //     url: `/loan/delete/${id}`,
    //     method: "delete",
    //   });
    //   this.loadByPage();
    // },
    async deleteLoan(id, name) {
      let needNext = await this.$gconfirm(`是否确定删除【${name}】?`);
      if (!needNext) return;
      // this.doDelete(id); // 拼接url
      this.doDelete(id); // 拼接url
    },
    //   doHandleSizeChange(res) {
    //     // console.log(res);
    //     this.pager.pageSize = res;
    //     this.pager.pageNo = 1
    //     this.loadByPage();
    //   },
    //   doHandleCurrentChange(res) {
    //     // console.log(res);
    //     this.pager.pageNo = res;
    //     this.loadByPage();
    //   },
    // async loadByPage() {
    //   this.isLoading = true;
    //   // const res = await loanLost(pager);
    //   const res = await loanLost(this.pager);
    //   this.isLoading = false;
    //   this.data = res?.data?.data?.data?.data;
    // },
  },
};
</script>
